.main {
  width: 500px;
  height: 500px;
  /* border: 1px solid #999; */
  margin: 0 auto;
  position: relative;
}
.d1 {
  width: 250px;
  height: 180px;
  position: absolute;
  left: 50px;
  top: 0;
  /* border: 1px solid #ccc; */
  background-image: url(../img/mingren.png);
  background-size: auto;
}
#lxw:checked ~ .d1 {
  animation: lxw 2s steps(16) infinite 0.5s;
}
@keyframes lxw {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -3072px;
  }
}
.d2 {
  width: 300px;
  height: 150px;
  position: absolute;
  left: 130px;
  top: 82px;
  /* border: 1px solid #ccc; */
  background-image: url(../img/qianniao.png);
  background-size: auto;
}
#qn:checked ~ .d2 {
  animation: qn 2s steps(13) infinite;
}
@keyframes qn {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -2496px;
  }
}
.choose {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
}
.btn {
  display: inline-block;
  width: 100px;
  height: 40px;
  border: 1px solid black;
  border-radius: 10px;
  text-align: center;
  line-height: 40px;
}
.btn:hover {
  box-shadow: 0 0 10px #666;
}
